<!--
设备概览页面
-->
<template>
  <div>
    <div v-if="theme == 'NOC' || !isOfficeData">
      <h2 class="content-title">{{ $t('exportPdf.addressPool') }}</h2>
      <a-table
        bordered
        :data-source="vlanDhcpSource"
        :columns="vlandhcpColumns"
        :pagination="false"
      >
      </a-table>
    </div>
    <div v-else>
      <h2 class="content-title">{{ vlanTitle }}</h2>
      <div class="margin-left-15">
        <h3>{{ $t('exportPdf.wiredNetwork') }}</h3>
        <a-table
          bordered
          :data-source="vlanDataSource"
          :columns="vlanColumns"
          :pagination="false"
        >
          <template slot="ipAddrRender" slot-scope="text, record">
            <div>
              {{ text != '' ? ` ${text}/${record.ipMask}` : '' }}
            </div>
          </template>
        </a-table>

        <h3>{{ $t('exportPdf.wirelessNetwork') }}</h3>
        <a-table
          bordered
          :data-source="wifiDataSource"
          :columns="wifiColumns"
          :pagination="false"
        >
          <template slot="ipAddrRender" slot-scope="text, record">
            <div>
              {{ text != '' ? ` ${text}/${record.ipMask}` : '' }}
            </div>
          </template>
        </a-table>

        <h3>{{ apptitle }}</h3>
        <a-table
          bordered
          :data-source="officeDataSource"
          :columns="officeColumns"
          :pagination="false"
        ></a-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import { i18nRender } from '@/locales';
const COLUMNS = [
  {
    title: i18nRender('exportPdf.sno'),
    dataIndex: 'num',
    key: 'num',
    width: '50px',
  },
  {
    title: i18nRender('exportPdf.name'),
    dataIndex: 'dhcpName',
    key: 'dhcpName',
  },
  {
    title: i18nRender('exportPdf.addrPool'),
    dataIndex: 'ipAddr',
    key: 'ipAddr',
    scopedSlots: { customRender: 'ipAddrRender' },
  },
  {
    title: 'VLAN',
    dataIndex: 'vlanId',
    key: 'vlanId',
  },
  {
    title: i18nRender('exportPdf.remark'),
    dataIndex: 'remark',
    key: 'remark',
  },
];
export default {
  name: 'vlandhcp',
  props: {},
  components: {},
  data() {
    return {
      vlanTitle: this.$t('exportPdf.addressPool'), //theme主题是NOC 3.VLAN和地址池 否则3.办公业务配置
      apptitle: '',
      isOfficeData: true,
      vlandhcpColumns: COLUMNS,
      officeColumns: [
        {
          title: i18nRender('exportPdf.appName'),
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: i18nRender('exportPdf.appDecription'),
          dataIndex: 'notice',
          key: 'notice',
        },
      ],
      vlanColumns: [
        {
          title: i18nRender('exportPdf.wiredPlan'),
          dataIndex: 'remark',
          key: 'remark',
        },
        {
          title: i18nRender('exportPdf.addrRange'),
          dataIndex: 'ipAddr',
          key: 'ipAddr',
          scopedSlots: { customRender: 'ipAddrRender' },
        },
        {
          title: i18nRender('exportPdf.vlanNo'),
          dataIndex: 'vlan',
          key: 'vlan',
        },
        {
          title: i18nRender('exportPdf.ipMethod'),
          dataIndex: 'iptype',
          key: 'iptype',
        },
      ],
      wifiColumns: [
        {
          title: i18nRender('exportPdf.wirelessPlan'),
          dataIndex: 'remark',
          key: 'remark',
        },
        {
          title: i18nRender('exportPdf.wifiName'),
          dataIndex: 'wifiname',
          key: 'wifiname',
        },
        {
          title: i18nRender('exportPdf.wifiPassword'),
          dataIndex: 'wifipass',
          key: 'wifipass',
        },
        {
          title: i18nRender('exportPdf.addrRange'),
          dataIndex: 'ipAddr',
          key: 'ipAddr',
          scopedSlots: { customRender: 'ipAddrRender' },
        },
        {
          title: i18nRender('exportPdf.vlanNo'),
          dataIndex: 'vlan',
          key: 'vlan',
        },
        {
          title: i18nRender('exportPdf.ipMethod'),
          dataIndex: 'iptype',
          key: 'iptype',
        },
      ],
      vlanDhcpSource: [],
      vlanDataSource: [],
      wifiDataSource: [],
      officeDataSource: [],
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      if (this.theme == 'NOC') {
        this.getVlanDhcpList();
      } else {
        this.getOfficeData();
      }
      this.getOfficeData();
      // this.getTotalDevice();
      // this.getDetailDevice();
    },
    /**
     * 获取设备概览
     */
    getOfficeData() {
      let api = `${maccApi.DELIVERY_OFFICE_INFO.replace(
        '{groupId}',
        this.groupId
      )}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        if (ret && ret.code == 0) {
          let officeData = ret.list;
          this.isOfficeData = officeData.length > 0;
          if (officeData.length > 0) {
            this.vlanTitle = this.$t('exportPdf.title1', {
              sceneType: officeData[0].sceneType,
            });
            this.apptitle = this.$t('exportPdf.title2', {
              sceneType: officeData[0].sceneType,
            });
          }
          for (var i = 0; i < officeData.length; i++) {
            if (officeData[i].type == 'wired') {
              this.vlanDataSource = officeData[i].list;
            } else if (officeData[i].type == 'wireless') {
              this.wifiDataSource = officeData[i].list;
            } else if (officeData[i].type == 'app') {
              this.officeDataSource = officeData[i].list;
            }
          }
        }
      });
    },
    /**
     * 获取设备详情清单
     */
    getVlanDhcpList() {
      let api = `${maccApi.DELIVERY_VLAN_DHCP.repalce(
        '{groupId}',
        this.groupId
      )}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        if (ret && ret.code == 0) {
          if (ret.list && ret.list.length > 0) {
            this.vlanDhcpSource = this.addNum(ret.list);
          } else {
            this.vlanDhcpSource = [];
          }
        } else {
          this.vlanDhcpSource = [];
        }
      });
    },
    addNum(list) {
      let i = 1;
      list = list.map((item) => {
        item.num = i++;
        return item;
      });
      return list;
    },
  },
  computed: {
    ...mapState('Theme', ['theme']),
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped>
h2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
h3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
.margin-left-15 {
  margin-left: 14px;
}
</style>
